<template>
	<view class="">
		<view class="Topbg">

			<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change" active-color="#fff"
				inactive-color="#fff" :bg-color="{background:'transparent'}"></u-tabs>


			<view v-for="(item,index) in list" :key="index" class="List" @click="go(item)">
				<view class="top">
					<view class="status">		
					    {{item.status==1?'待付款':''}}
						  {{item.status==2 && !item.state?'待发货':''}}
						 {{item.status==3 && !item.state?'待收货':''}}
					     {{item.status==4 && !item.state?'已完成':''}}
						 {{item.state?'售后':''}}
						  
						  <text style="color: #FF6450;font-size: 28rpx;">{{item.orderType==2?'[积分商品]':''}}</text>
						  <text style="color: #FF6450;font-size: 28rpx;">{{item.ptState?'[拼团商品]':''}}</text>
					</view>
					<view class="btn" @click.stop="btncontrols(item)">
						{{item.status==1&& !item.state?'立即支付':''}}
						  {{item.status==2&& !item.state?'查看详情':''}}
						 {{item.status==3&& !item.state?'确认收货':''}}
						 {{item.status==4 && !item.state?'查看详情':''}}
						{{item.state?'售后':''}}
					</view>
				</view>
				<view v-for="(item1,index1) in item.goods" :key="index" class="u-padding-20 u-border-bottom">
					<view class="u-flex">
						<u-image :src="item1.cover" width="160" height="160"></u-image>
						<view class="right">
							<view class="title">
								{{item1.name}}
							</view>
							<view class="size">
								{{item1.spec}}
							</view>

							<view class="controls">
								<view class="price">
									￥{{item1.price}}
								</view>
								<view class="num">
									x{{item1.num}}
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="allPrice">
					￥{{item.payMoney}}
				</view>

			</view>
			
				<u-loadmore :status="status" v-if="list.length"/>
				
				<view class="empty">
					<u-empty text="该订单是空的" mode="order"  v-if="!list.length"></u-empty>
				</view>
				
				 	  <u-toast ref="uToast" />
		</view>
	
		</view>
</template>

<script>
	import payway from '../../common/wxpay.js';

	export default {
		data() {
			return {
				nav: [{
					name: '全部',
					
				}, {
					name: '待付款'
				}, {
					name: '待发货',

				}, {
					name: '待收货',

				}, {
					name: '已完成',

				}, {
					name: '售后',

				}],
				current: 0,

				list: [],
				page:1,

				status: 'loadmore',
				
			}
		},
		onLoad(options) {
			if(options.block){
				this.current=options.block
			}

		},
		onShow() {
			this.page=1
			 this.getBook()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.keyword='';
			this.goods_classify_id='';
			this.current=0;
			this.getBook()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if (this.status == 'nomore') {
		
			} else {
				this.getBook()
			}
		
		},
		
		methods: {
			btncontrols(item) {
				// 支付
				if(item.status==1){
					this.$u.post('/api/indent/pay', {
						order_id: item.id
					}, {}).then(res => {
						var packages = res.data.package;
						var {
							noncestr,
							timestamp,
							signtype,
							paysign
						} = res.data;
						payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
							this.$refs.uToast.show({
								title: '支付成功',
								type: 'success',
								back: true,
							})
							this.page=1;
							this.getBook()
						}).catch(err => {
								console.log(res)
						})
								
					}).catch(err => {})
				}
				// 查看详情 已完成
				if(item.status==2 || item.status==4){

					uni.navigateTo({
						url: "./detail?id="+item.id
					})
				}
				// 确认收货
				if(item.status==3){
					uni.showModal({
					  content:"是否确认收货?",
					  success:(res)=> {
					  	 if(res.confirm){
							 this.$u.post('/api/indent/signFor', {
							 	order_id:item.id
							 }, {}).then(res => {
							
							 	  this.$refs.uToast.show({
							 	  		title: '收货成功',
							 	  		type: 'success',
							 	  })
								  this.page=1;
								  this.getBook()
							 }).catch(err => {})
						 }
					  }
					})
					
				}
				
			
			},
			
			getBook(){
				this.$u.post('/api/indent/orderList', {
					state:this.current,
					page:this.page,
					limit:10
				}, {}).then(res => {
					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
					
				}).catch(err => {})
			},
			change(index) {
				this.current = index;
				this.page=1;
				this.list=[]
				this.getBook()
			
			},
			
			go(item) {
				uni.navigateTo({
					url: "./detail?id="+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.Topbg {
		height: 300rpx;
		background: #628DFF;

		border-radius: 0rpx 0rpx 50% 50%;
		display: inline-block;
		width: 750rpx;

	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.status {
			font-size: 40rpx;
			color: #608CFF;
		}

		.btn {
			width: 140rpx;
			height: 66rpx;

			background: #608CFF;
			border-radius: 40rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.allPrice {

		font-size: 48rpx;
		color: #FF6450;
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;
	}



	.List {
		background: #FFFFFF;
		width: 690rpx;
		padding: 20rpx;
		margin: 40rpx auto;
		border-radius: 20rpx;
		box-shadow: 0px 4rpx 10rpx rgba(208, 208, 208, 0.25);

	}

	.right {
		margin-left: 20rpx;
		width: 450rpx;

		.size {
			background: #F6F6F6;
			border-radius: 30rpx;
			padding: 7rpx 30rpx;
			text-align: center;
			display: table !important;
			font-size: 24rpx;
			color: #999999;
			margin: 20rpx 0;
		}

		.controls {
			display: flex;
			justify-content: space-between;

			.price {
				color: #FF6450;
				font-size: 36rpx;
			}

			.num {
				color: #628DFF;
				font-size: 36rpx;

			}
		}

	}
</style>
